﻿@model OpenMVCRM.ViewModels.ClientViewModel
@{
    ViewBag.Title = "Create";
}
 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@Html.ValidationSummary(true, "Please fill all")
<fieldset>

<div class="divContainer">
<div class="divEditBar">
<div class="divBreadCrump">
      <span>You are here : </span>
      @Html.ActionLink("Clients","Index") <span class="breadCrumpSeperator"></span>
      Create
</div>
<div class="divEditRightLinks">    
</div>
</div>

<div class="divCreateForm">
@using (Html.BeginForm())
{ 
    <div class="formSection">
    <h3>Client Details</h3>
    <div class="editor-label">
        @Html.LabelFor(m => m.Name)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(m => m.Description)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.Industries)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(m => m.SelectedIndustryId, new SelectList(Model.Industries, "ID", "Name"), "Select...")
        @Html.ValidationMessageFor(m => m.SelectedIndustryId)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.WebSite)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.WebSite)  
    </div>
    <div class="editor-label">
        <label>Primary Phone Number</label>
   </div>
    <div class="editor-field">
       @Html.TextBoxFor(m => m.PrimaryPhone.Number)      
    </div>
    </div>      
    <div class="formSection">
     <h3>Address</h3>
    <div class="editor-label">
        @Html.LabelFor(m => m.AddressLine1)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.AddressLine1)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.AddressLine2)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.AddressLine2)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.City)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.Countries)
   </div>
    <div class="editor-field">
        @Html.DropDownListFor(x => x.SelectedCountryID, new SelectList(Model.Countries, "CountryID", "CountryName"), "Select")
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.SelectedStateID)
    </div>
    <div class="editor-field">
       @Html.DropDownListFor(x => x.SelectedStateID, new SelectList(Model.States, "StateID", "StateName"), "Select")
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.City)
    </div>
    <div class="editor-field">
       @Html.TextBoxFor(x => x.City)       
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.ZipCode)
   </div>
    <div class="editor-field">
       @Html.TextBoxFor(x => x.ZipCode)
    </div>
    </div>    
    <p>
       <input type="submit" value="Save" />
    </p>
}
</div>
</div>
</fieldset>
<script type="text/javascript">
    $(function () {
        $("#SelectedCountryID").change(function () {
            var self = $(this);
            var items="";
            $.getJSON("@Url.Action("Index", "States")?id="+self.val(),function(data){
              $.each(data,function(index,item){
                items+="<option value='"+item.StateID+"'>"+item.StateName+"</option>";
              });
              $("#SelectedStateID").html(items);
            });
        });
    });
</script>